<template>
<div class="container-cc">
    <div class="info">
        <img class="mess-image" :src="coverImage" alt="">
        <div class="info-right">
            <div class="title">{{ title }}</div>
            <van-stepper @change="scoreChange" v-model="countNum" theme="round" button-size="22" disable-input />
        </div>
    </div>
    <div class="total">
        总价： 
        <span class="score">{{totalScore}}</span>
    </div>
    <div class="dhbtn" @click="handleDialog">
        <van-button round block type="primary" native-type="submit" class="duihuan">
        兑换
        </van-button>
    </div>
    <van-dialog
        v-model:show="show"
        title="请输入个人信息"
    >
        <van-form @submit="onSubmit">
        <van-field
            v-model="form.name"
            name="姓名"
            label="姓名"
            placeholder="请输入姓名"
            :rules="[{ required: true, message: '请输入姓名' }]"
        />
        <van-field
            v-model="form.phone"
            name="手机号"
            label="手机号"
            type="number"
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请输入手机号' }]"
        />
        <van-field
            v-model="form.address"
            name="地址"
            label="地址"
            placeholder="请输入地址"
            :rules="[{ required: true, message: '请输入地址' }]"
        />
        <div class="addbtn">
            <van-button class="quxiao" round block @click="closeD">
                取消
            </van-button>
            <van-button class="queren" round block type="primary" native-type="submit">
                确认
            </van-button>
        </div>
        </van-form>
    </van-dialog>
    </div>
</template>
 
<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { onMounted } from 'vue'
import { getPointDetail, exchangeGift } from '@/api/message';
import { showToast, showDialog } from 'vant';

const router = useRouter()
const gift = ref({})
const title = ref('')
const coverImage = ref('')
const detailImage = ref('')
const score = ref('')
const giftId = ref('')
const totalScore = ref('')

const { mobilePhone, realName } = JSON.parse(localStorage.getItem('userInfo'))[0];
const form = reactive({
  phone: mobilePhone,
  name: realName,
  address: ''
})

const show = ref(false);
const handleDialog = () =>{
    show.value = true
}

const getDetail = () => {
  getPointDetail(router.currentRoute.value.query.giftId).then((res) => {
  if (res.code === 200) {
    gift.value = res.data
    title.value = gift.value.title
    score.value = gift.value.score
    giftId.value = gift.value.giftId
    totalScore.value = score.value
    if(JSON.parse(gift.value.coverImage).length>0){
      coverImage.value = process.env.VITE_API_API_IMAGE_URL + JSON.parse(gift.value.coverImage)[0].url
    }
    if(JSON.parse(gift.value.detailImage).length>0){
      detailImage.value = process.env.VITE_API_API_IMAGE_URL + JSON.parse(gift.value.detailImage)[0].url
    }
    } else {
    }
  }).catch((err) => {
    console.log(err)
  })
}

const countNum = ref()
const scoreChange = (e) =>{
  // console.log('countNum:',countNum.value);
    totalScore.value = score.value*e 
}

const parentId = JSON.parse(localStorage.getItem('parentId'));

const onSubmit = () => {
  let { phone,name, address } = form;
  const params = {
    giftId: giftId.value,
    parentId: parentId,
    name: name,
    phone: phone,
    address: address,
    score: totalScore.value,
    count: countNum.value
  }
  exchangeGift(params).then((res) => {
    if (res.code === 200) {
      router.push({ path: '/exchangeSuccess'})
    } else {
      show.value = false
      setTimeout(()=>{
        showDialog({
        message: res.msg,
        theme: 'round-button',
        confirmButtonColor: '#1989fa'
        }).then(() => {
        // on close
        });
     },500)
      
    }
  }).catch((err) => {
    console.log(err)
  })
}


const closeD = () => {
    show.value = false
};


onMounted(() => {
  getDetail()
})

</script>
 

<style lang="scss" scoped>
.container-cc {
  background: #fff;
  overflow: hidden;
  padding: 1rem 1.4rem;
  box-sizing: border-box;
  height: 100%;
}
.info{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mess-image{
    width:  50%;
    height: 160px;
}
.info-right{
    width: 46%;
    text-align: right;
}

.title{
    font-size: 1.6rem;
    margin-bottom: 2rem;
    text-align: left;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.total{
    text-align: right;
    width: 100%;
    font-size: 1.6rem;
    color: red;
}
.score{
    font-weight: bold;
}
.dhbtn{
    position: fixed;
    bottom: 2rem;
    left: 5%;
    width: 90%;
}
::v-deep .van-dialog__confirm,
::v-deep .van-dialog__cancel{
    display: none;
}
.addbtn{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 2rem 0;
}
.quxiao{
    width: 12rem;
}
.queren{
    width: 12rem;
}
</style>
